<template lang="html">
  <div>
    <div class="search">
        <div class="input">
            <p><label>手机号：</label><el-input placeholder="请输入内容" label="条件" v-model="searchData.name"></el-input></p>
            <p>
              <label>筛选：</label>
              <el-select v-model="searchData.type" placeholder="请选择">
                <el-option value="">请选择</el-option>
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
            </p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center" width='320px'>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  v-if="scope.row.isLock == '正常'"
                  type="danger"
                  class="del"
                  @click="handleEdit(scope.row)">锁定
                </el-button>
                <el-button
                  size="mini"
                  v-else
                  type="success"
                  class="del"
                  @click="unlock(scope.row)">解锁
                </el-button>
                <el-button
                  size="mini"
                  type='primary'
                  @click="details(scope.row)">详情
                </el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
      <slot>
          <el-form :model="pageData" ref="ruleForm" label-width="80px" class="demo-ruleForm">
             <el-form-item
               v-for="(item,key) in formData"
               :key="key"
               :label="item.label">
                <el-input v-if="item.label == '锁定原因'" v-model = "formDataremark['remark']" type="textarea" placeholder="请输入内容"></el-input>
                <el-input v-else placeholder="请输入内容" v-model = "item.value" :disabled="true"></el-input>
              </el-form-item>
                <el-form-item label="锁定时间">
                  <el-date-picker
                    v-model="pageData.lockTime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                 </el-form-item>
              <el-form-item class="confirm">
                 <el-button type="primary" @click="submitForm()">提交</el-button>
              </el-form-item>
          </el-form>
      </slot>
  </dialogVue>
  </div>
</template>

<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  userList,
  userLock,
  unuserLock
} from "@/api/userCenter/userlist";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getuserList({size :'10'});
  },
  methods : {
    getuserList (data) {//用户列表
      this.pageData.loading = true;
      userList (data).then(res=>{
          if (res.data.code == 'OK') {
            this.pageData.loading = false;
            this.total = res.data.data.total;
             this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate);
               item.lockTime = this.switchTime(item.lockTime);
               item.isLock = item.isLock == 'N' ? '正常' : "锁定"
                  return item;
             })
          }
      })
    },
    search () {
      var data = {
        mobile : this.searchData.name,
        size : '10',
        current : this.current
      }
      this.getuserList(data);
    },
    handSize (val) {
      this.current = val;
        this.getuserList({
          size : '10',
          current : val
        });
    },
    handleEdit (val) {
      this.dialog = true;
      this.userId = val.userId
      this.formData.map(item=>{
        if (item.label == '用户id') {
            item.value = val.userId
        } else if (item.label == '手机号码') {
           item.value = val.mobile
        } else if (item.label == '用户账号') {
          item.value = val.nickname;
        }
      })
    },
    details (item) {
      this.$router.push({
        name : 'userDetails',
        query : {
          id : item.userId
        }
      })
    },
    unlock (item) {//解锁
      this.$confirm('此操作将解锁用户, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
         }).then(() => {
            unuserLock (item.userId).then(res=>{
              if (res.data.code == 'OK') {
                this.$message.success('解锁成功')
                 this.dialog = false;
                  var data = {
                    mobile : this.searchData.name,
                    size : '10',
                    current : this.current
                  }
                  this.getuserList(data);
              } else {
                this.$message.error(res.data.message)
              }
            })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消锁定'
           });
       });
    },
    submitForm () {//锁定
      this.$confirm('此操作将锁定用户, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
         }).then(() => {
           var data = {
             userId : this.userId,
             lockTime : +this.pageData.lockTime,
             remark : this.formDataremark.remark
           }
            userLock (data).then(res=>{
               if (res.data.code == 'OK') {
                 this.$message.success('锁定成功')
                  this.dialog = false;
                   var data = {
                     mobile : this.searchData.name,
                     size : '10',
                     current : this.current
                   }
                   this.getuserList(data);
               } else {
                 this.$message.error(res.data.message)
               }
            })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消锁定'
           });
       });
    },
    changeData (data) {
      this.dialog = data;
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
</style>
